<template>
  <view
    class="wrapper"
    v-if="detail"
  >
    <!-- 商品图片 -->
    <swiper
      class="pics"
      indicator-dots
      indicator-color="rgba(255, 255, 255, 0.6)"
      indicator-active-color="#fff"
    >
      <swiper-item
        v-for="(item,i) in detail.pics"
        :key="i"
      >
        <image :src="item.pics_big_url" />
      </swiper-item>
    </swiper>
    <!-- 基本信息 -->
    <view class="meta">
      <view class="price">￥{{detail.goods_price}}</view>
      <view class="name">{{detail.goods_name}}</view>
      <view class="shipment">快递: 免运费</view>
      <text class="collect icon-star">收藏</text>
    </view>
    <!-- 商品详情 -->
    <view class="detail">
      <!-- <view v-html="detail.goods_introduce"></view> -->
      <Uprase
        :content="detail.goods_introduce"
        @preview="preview"
      />
    </view>
    <!-- 操作 -->
    <view class="action">
      <button
        open-type="contact"
        class="icon-handset"
      >联系客服</button>
      <!-- 显示购物车商品数量 -->
      <text
        v-if="carts.length"
        class="add-count"
      >
        {{carts.length}}
      </text>
      <text
        class="cart icon-cart"
        @click="goCart"
      >购物车</text>
      <text
        class="add"
        @click="addCart"
      >加入购物车</text>
      <text
        class="buy"
        @click="createOrder"
      >立即购买</text>
    </view>
  </view>
</template>

<script>
// 导入第三方组件（插件市场下载）
import Uprase from '@/components/uparse/parse'
export default {
  data() {
    return {
      // 详情数据
      detail: null,
      // 购物车数据
      carts: uni.getStorageSync('carts') || []
    }
  },
  components: {
    Uprase,
  },
  // 获取query参数
  onLoad(opt) {
    console.log(opt)
    this.getDetail(opt.id)
  },
  methods: {
    // 把当前商品加入到购物车
    /**
     * 1. 设计购物车数据=》[{商品数据1},{商品数据2}...]=>
     购物车中商品保留字段：{goods_id,goods_name,goods_price,goods_small_logo,
         goods_count（数量），goods_checked（是否被选中）}
     * 2. 添加=》1. 没有=》push 2. 加过=》加过商品数量加一
     * 3. 购物车添加的商品数据缓存到本地
     */
    addCart() {
      console.log('add', this.carts)
      // 是否添加过
      let isAdd = this.carts.some(prd => {
        if (prd.goods_id === this.detail.goods_id) {
          // 添加过=> 数量加一
          prd.goods_count++
          return true
        }
      })
      if (!isAdd) {
        // 没有添加过=》新增
        // 结构需要存储的数据
        const { goods_id, goods_name, goods_price, goods_small_logo } = this.detail
        //  存储
        this.carts.push({
          goods_id, goods_name, goods_price, goods_small_logo,
          // 数量
          goods_count: 1,
          // 选中状态
          goods_checked: false
        })
      }

      // 购物车数据存储到本地
      uni.setStorageSync('carts', this.carts)

    },
    // 预览图片
    preview(src, e) {
      console.log(src, e)
    },
    // 根据商品ID获取商品详情数据
    async getDetail(goods_id) {
      const { data } = await this.request({
        url: '/api/public/v1/goods/detail',
        data: { goods_id }
      })
      console.log(data)
      this.detail = data
    },
    // 跳转购物车页面
    goCart() {
      uni.switchTab({
        url: "/pages/cart/index"
      });
    },
    // 跳转订单页面
    createOrder() {
      uni.navigateTo({
        url: "/packone/order/index"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  margin-bottom: 100rpx;
  background-color: #f4f4f4;
}

.pics {
  height: 640rpx;
}
.img {
  border: 2px solid red;
}
.meta {
  height: 250rpx;
  line-height: 1;
  padding: 30rpx 180rpx 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;

  .price {
    font-size: 36rpx;
    color: #ea4451;
    margin-bottom: 20rpx;
  }

  .name {
    color: #333;
    line-height: 1.4;
    font-size: 33rpx;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .shipment {
    font-size: 27rpx;
    color: #999;
    position: absolute;
    bottom: 30rpx;
  }

  .collect {
    width: 140rpx;
    height: 88rpx;
    text-align: center;
    box-sizing: border-box;
    border-left: 1rpx solid #ddd;
    font-size: 24rpx;
    color: #999;

    position: absolute;
    right: 10rpx;
    top: 91rpx;
  }

  [class*="icon-"]::before {
    display: block;
    font-size: 45rpx;
    margin-bottom: 10rpx;
  }
}

.detail image {
  width: 100%;
  height: 480rpx;
  margin-top: 20rpx;
}

.action {
  width: 100%;
  height: 98rpx;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  align-items: center;

  text {
    display: block;
  }

  .add,
  .buy {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210rpx;
    text-align: center;
    font-size: 27rpx;
    color: #fff;
  }

  .add-count {
    position: absolute;
    top: -16rpx;
    left: 252rpx;
    font-size: 28rpx;
    background-color: #fd1800;
    color: #fff;
    width: 50rpx;
    height: 50rpx;
    border-radius: 50rpx;
    line-height: 50rpx;
    text-align: center;
  }

  .add {
    background-color: #f4b73f;
  }

  .buy {
    background-color: #ea4451;
  }

  button {
    padding: 0;
    border-radius: 0;
    background-color: #fff;

    &::after {
      border: none;
    }
  }

  button,
  .cart {
    flex: 1;
    text-align: center;
    color: #989898;
    font-size: 24rpx;
    box-sizing: border-box;
  }

  [class*="icon"]::before {
    display: block;
    font-size: 45rpx;
    margin-bottom: 2rpx;
  }
}
</style>
